<template>
  <div class="tab-side">
    <div style="display: flex; justify-content: space-between;">
      <el-tabs
        :activeName="activeName.value"
        style="--el-color-primary: #3271ae;"
        @tab-change="handleTabChange"
      >
        <el-tab-pane
          label="全部订单"
          :name="-1"
        ></el-tab-pane>
        <el-tab-pane
          label="待付款"
          :name="0"
        ></el-tab-pane>
        <el-tab-pane
          label="待收货"
          :name="3"
        ></el-tab-pane>
      </el-tabs>
      <el-input
        v-model="key"
        style="width: 240px; height: 40px;"
        placeholder="商品名称/商品编号/订单号"
      >
        <template #append>
          <el-button @click="handleClick">
            <el-icon>
              <Search />
            </el-icon>
          </el-button>
        </template>
      </el-input>
    </div>
    <all-order
      ref="allOrder"
      :tab="activeName"
      @change="handleChange"
    ></all-order>
  </div>
</template>

<script>
import AllOrderVue from "./AllOrder.vue";

export default {
  components: {
    AllOrder: AllOrderVue,
  },
  data() {
    return { activeName: { value: -1 }, key: "" };
  },
  methods: {
    handleTabChange(val) {
      this.activeName.value = val;
    },
    handleClick() {
      this.$refs.allOrder.handleSelectAllOrderDetailByKey(this.key);
    },
  },
  watch: {
    "activeName.value"(newValue, oldValue) {
      this.key = "";
      this.$refs.allOrder.handleSelectAllOrderDetail();
    },
  },
  mounted() {
    if (this.$route.query.type !== undefined) {
      this.activeName.value = parseInt(this.$route.query.type)
      this.$router.push({ query: {} });
    }
  },
};
</script>

<style scoped>
.tab-side {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  /* align-items: center; */
  width: 100%;
  background-color: #fff;
  margin: 20px 0;
  padding: 10px 20px;
}
</style>